<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-07 09:32:03
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-04-11 15:16:00
-->
<template>
    <el-dialog
        v-model="data.dialog.visible"
        width="752"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
        <template #header="{ titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">{{ data.name }}</h4>
                <component
                    style="width: 18px; height: 18px; margin-right: 8px; cursor: pointer"
                    is="CloseBold"
                    @click="close"
                />
            </div>
            <div class="protocol-info">
                <span>应用渠道：{{ data.channel }}</span>
                <span>版本号：{{ data.version }}</span>
                <span>创建时间：{{ data.time }}</span>
            </div>
        </template>
        <div class="dialog-container" v-html="data.content"></div>
        <template #footer>
            <span class="dialog-footer"> </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
import { PreviewData } from '.'

/**
 * 初始化数据
 */
const data = reactive(new PreviewData())

/**
 * 接收父组件传递的参数
 */
const props = defineProps(['data'])

/**
 * 注册父组件的回调方法
 */
const emits = defineEmits(['hidden'])

/**
 * 由于props中的数据是Readonly，不能直接使用，所以用watchEffect监听props数据变化
 */
watchEffect(() => {
    data.dialog.visible = props.data.visible
    if (data.dialog.visible) {
        data.getProtocolById(props.data.id)
    }
})

/**
 * 关闭弹窗方法，并且传递弹窗隐藏
 */
const close = () => {
    emits('hidden', true)
}
</script>

<style scoped lang="scss">
.my-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h4 {
        position: relative;
        padding-left: 8px;

        &::before {
            content: '';
            width: 2px;
            height: 16px;
            background-color: var(--bg-color-333);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }
}

.protocol-info {
    border-bottom: 1px solid #f1f1f1;
    display: flex;

    span {
        margin-right: 32px;
        font-size: 14px;
        line-height: 40px;
        color: var(--text-color-primary);
    }
}
.dialog-container {
}
</style>
